<template>
  <view>
    <div style="height: 50rpx"></div>
    <div class="header">
      <div class="back center" @click="back">
        <image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
      </div>
      {{$t('添加载具')}}
    </div>

    <view class="bor_bgff screen">
      <view class="title"> <text class="required">*</text>{{$t('运输类型')}} </view>
      <view class="transport" @click="pickerTran = true">
        <view class="transport_name">
          {{ pickerForm.transportName || $t('请选择') }}
        </view>
        <u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
      </view>

      <view class="title"> <text class="required">*</text>{{$t('载具类型')}} </view>
      <view class="transport" @click="pickerCategoryChange">
        <view class="transport_name">
          {{ pickerForm.car_category_name || $t('请选择') }}
        </view>
        <u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
      </view>
      <view class="title" v-if="pickerForm.transportVal == 2">
        <text class="required">*</text>车牌号-{{$t('挂')}}{{$t('车号')}}
      </view>
      <view class="title" v-if="pickerForm.transportVal == 3">
        <text class="required">*</text>{{$t('航班号')}}
      </view>
      <view class="title" v-if="pickerForm.transportVal == 4">
        <text class="required">*</text>{{$t('箱号')}}
      </view>
      <view class="title" v-if="pickerForm.transportVal == 5">
        <text class="required">*</text>{{$t('车号')}}
      </view>
      <view
        class="publish_time_calendars"
        v-if="pickerForm.transportVal && pickerForm.transportVal == 2"
      >
        <view class="item">
          <u-input
            v-model="pickerForm.car_number"
            class="info_input"
            :placeholder="$t('请输入')"
          />
        </view>
        <view class="line"></view>
        <view class="item">
          <u-input
            v-model="pickerForm.trailer_number"
            class="info_input"
            :placeholder="$t('请输入')"
          />
        </view>
      </view>
      <view
        class="publish_time_calendars"
        v-if="pickerForm.transportVal && pickerForm.transportVal != 2"
      >
        <view class="items">
          <u-input
            v-model="pickerForm.car_number"
            class="info_input"
            :placeholder="$t('请输入')"
          />
        </view>
      </view>
      <view class="title"> <text class="required">*</text>{{$t('载具尺寸')}} </view>
      <view class="item_cc">
        <view class="item">
          <u-input
            type="number"
            placeholder=""
            v-model="pickerForm.car_l"
            fontSize="24rpx"
            shape="circle"
            border="none"
            :customStyle="{
              width: '100%',
              background: '#F6F7FB',
              height: '70rpx',
              padding: '0 20rpx',
            }"
          >
            <template v-slot:suffix>
              <view class="unit"> {{$t('米')}} </view>
            </template>
          </u-input>
        </view>
        <view class="item">
          <u-input
            type="number"
            placeholder=""
            v-model="pickerForm.car_w"
            fontSize="24rpx"
            shape="circle"
            border="none"
            :customStyle="{
              width: '100%',
              background: '#F6F7FB',
              height: '70rpx',
              padding: '0 20rpx',
            }"
          >
            <template v-slot:suffix>
              <view class="unit"> {{$t('米')}} </view>
            </template>
          </u-input>
        </view>
        <view class="item">
          <u-input
            type="number"
            placeholder=""
            v-model="pickerForm.car_h"
            fontSize="24rpx"
            shape="circle"
            border="none"
            :customStyle="{
              width: '100%',
              background: '#F6F7FB',
              height: '70rpx',
              padding: '0 20rpx',
            }"
          >
            <template v-slot:suffix>
              <view class="unit"> {{$t('米')}} </view>
            </template>
          </u-input>
        </view>
      </view>

      <view class="title"> <text class="required">*</text>{{$t('载具容积')}}(m³) </view>
      <view class="info_text">
        <input
          type="number"
          v-model="pickerForm.product_volume"
          class="info_input"
          placeholder="请输入"
        />
      </view>

      <view class="title"> <text class="required">*</text>{{$t('载具载重')}}(t) </view>
      <view class="info_text">
        <input
          type="number"
          v-model="pickerForm.product_weight"
          class="info_input"
          placeholder="请输入"
        />
      </view>

      <view class="title"> <text class="required">*</text>{{$t('当前状态')}} </view>
      <view class="transport" @click="pickerState = true">
        <view class="transport_name">
          {{ pickerForm.stateName || $t('请选择') }}
        </view>
        <u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
      </view>

      <view class="title"> <text class="required">*</text>{{$t('当前位置')}} </view>
      <view class="transport">
        <view class="transport_name w-full">
          <city
            :value="pickerForm.current_city_id"
            @change="
              (e) => {
                pickerForm.current_city_id = e.column3.value;
                pickerForm.country = e.column1.value;
                pickerForm.province = e.column2.value;
                pickerForm.current_city_name = e.column2.label;
              }
            "
          >
            {{ pickerForm.current_city_name || $t('请选择') }}
          </city>
        </view>
        <u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
      </view>
      <!-- identity_type!=8 -->
      <view class="title" v-if="pickerForm.transportVal == 2">
        <text class="required" v-if="identity_type != 8">*</text>{{$t('绑定司机')}}
        <view v-if="identity_type != 8" class="xuan" @click="employee">
          {{$t('添加司机')}}
        </view>
      </view>
      <view
        class="transport"
        @click="pickerDriver = true"
        v-if="pickerForm.transportVal == 2"
      >
        <view class="transport_name">
          {{ pickerForm.driverName || $t('请选择') }}
        </view>
        <u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
      </view>

      <view class="title"> {{$t('上传车辆照片')}} </view>
      <u-upload
        :fileList="fileList0"
        name="0"
        multiple
        :maxCount="10"
        :previewFullImage="true"
        @afterRead="afterRead('0', $event)"
        @delete="deletePic"
      ></u-upload>

      <view class="title"> {{$t('车辆照片')}} </view>
      <u-upload
        :fileList="fileList2"
        name="2"
        multiple
        :maxCount="10"
        :previewFullImage="true"
        @afterRead="afterRead('2', $event)"
        @delete="deletePic"
      ></u-upload>

      <view class="title"> {{$t('相关证件')}} </view>
      <u-upload
        :fileList="fileList1"
        name="1"
        multiple
        :maxCount="10"
        :previewFullImage="true"
        @afterRead="afterRead('1', $event)"
        @delete="deletePic"
      ></u-upload>

      <view class="title"> <text class="required">*</text>{{$t('主营线路')}} </view>

      <view class="car_line" v-for="(item, index) in inputs" :key="index">
        <view class="item">
          <city
            is_all="true"
            :value="inputs[index].startvalue"
            @change="
              (e) => {
                inputs[index].startvalue = e.column3.value;
                inputs[index].startcountry = e.column1.value;
                inputs[index].startprovince = e.column2.value;
                inputs[index].startname =
                  e.column2.value == -1 || e.column3.value == -1
                    ? [
                        e.column1.label,
                        e.column2.label.replace('全部', ''),
                        e.column3.label.replace('全部', ''),
                      ]
                        .filter((item) => item)
                        .join(',')
                    : e.column3.label;
              }
            "
          >
            <div class="fz24">{{ inputs[index].startname || $t('请选择') }}</div>
          </city>
        </view>
        <image
          class="ico"
          src="/static/img/ico_line5.png"
          mode="widthFix"
          @click="selectChange(item, index)"
        >
        </image>
        <view class="item">
          <city
            is_all="true"
            :value="inputs[index].endvalue"
            @change="
              (e) => {
                inputs[index].endvalue = e.column3.value;
                inputs[index].endcountry = e.column1.value;
                inputs[index].endprovince = e.column2.value;
                inputs[index].endname =
                  e.column2.value == -1 || e.column3.value == -1
                    ? [
                        e.column1.label,
                        e.column2.label.replace('全部', ''),
                        e.column3.label.replace('全部', ''),
                      ]
                        .filter((item) => item)
                        .join(',')
                    : e.column3.label;
              }
            "
          >
            <div class="fz24">{{ inputs[index].endname || $t('请选择') }}</div>
          </city>
        </view>
        <u-icon
          v-if="index == 0"
          class="ico_add"
          name="plus-circle"
          color="#999"
          size="36rpx"
          @click="addInput"
        ></u-icon>
        <u-icon
          v-if="index !== 0"
          class="ico_delete"
          name="minus-circle"
          color="#999"
          size="36rpx"
          @click="removeInput(index)"
        ></u-icon>
      </view>
    </view>

    <view class="footer_none"></view>
    <view class="footer_btn">
      <u-button
        type="primary"
        class="btn"
        text="确定提交"
        :loading="submit_loading"
        :disabled="submit_loading"
        @click="submit_sub"
      ></u-button>
    </view>

    <u-picker
      ref="pickerCity"
      :columns="addressList"
      :loading="loading"
      keyName="name"
      @change="changeCity"
      @confirm="confirmCity"
    >
    </u-picker>
    <u-picker
      :closeOnClickOverlay="true"
      ref="pickerState"
      keyName="label"
      :itemHeight="80"
      :show="pickerState"
      :columns="columnState"
      @confirm="confirmChange($event, 'pickerState', 'stateVal', 'stateName')"
      @cancel="pickerState = false"
      @close="pickerState = false"
    ></u-picker>

    <u-picker
      :closeOnClickOverlay="true"
      ref="pickerDriver"
      keyName="title"
      :itemHeight="80"
      :show="pickerDriver"
      :columns="columnDriver"
      @confirm="
        confirmChange($event, 'pickerDriver', 'driverVal', 'driverName')
      "
      @cancel="pickerDriver = false"
      @close="pickerDriver = false"
    ></u-picker>

    <u-picker
      :closeOnClickOverlay="true"
      ref="pickerTran"
      keyName="label"
      :itemHeight="80"
      :show="pickerTran"
      :columns="columnTran"
      @confirm="
        confirmChange($event, 'pickerTran', 'transportVal', 'transportName')
      "
      @cancel="pickerTran = false"
      @close="pickerTran = false"
    ></u-picker>

    <u-picker
      :closeOnClickOverlay="true"
      ref="pickerCategory"
      keyName="title"
      :itemHeight="80"
      :show="pickerCategory"
      :columns="columnCategory"
      @confirm="
        confirmChange(
          $event,
          'pickerCategory',
          'car_category_id',
          'car_category_name'
        )
      "
      @cancel="pickerCategory = false"
      @close="pickerCategory = false"
    ></u-picker>
  </view>
</template>

<script>
import { driver_select, delivery_vehicle, transport_save } from "@/api/driver";
import citySelect from "@/pages/publish/components/citySelect.vue";
export default {
  components: {
    citySelect,
  },
  data() {
    return {
      fileList0: [],
      fileList1: [],
      fileList2: [],
      loading: true,
      show: true,
      provinces: [],
      citys: [],
      areas: [],
      pickerValue: [0, 0, 0],
      defaultValue: [3442, 1, 2],
      siteCity: "",
      inputs: [
        {
          startvalue: "",
          startname: "",
          startcountry: "",
          startprovince: "",
          endvalue: "",
          endname: "",
          endcountry: "",
          endprovince: "",
          step: 0,
        },
      ],
      columnState: [
        [
          {
            label: this.$t('空闲'),
            id: 1,
          },
          {
            label: this.$t('工作'),
            id: 3,
          },

          {
            label: this.$t('正常'),
            id: 2,
          },
          {
            label: this.$t('停运'),
            id: 4,
          },
        ],
      ],
      submit_loading: false,
      pickerState: false,
      pickerDriver: false,
      pickerTran: false,
      pickerCategory: false,
      showCityPicker: false,
      fullAddress: "",
      pickerForm: {
        id: "",
        stateVal: "",
        stateName: "",
        driverVal: "",
        driverName: "",
        transportVal: "",
        transportName: "",
        car_number: "",
        trailer_number: "",
        car_l: "",
        car_w: "",
        car_h: "",
        product_weight: "",
        product_volume: "",
        car_category_id: "",
        car_category_name: "",
        current_city_id: "",
        current_city_name: "",
        country: "",
        province: "",
      },

      columnDriver: [],
      columnCategory: [],
      columnTran: [
        [
          {
            label: this.$t('汽运'),
            id: 2,
          },
          {
            label: this.$t('空运'),
            id: 3,
          },
          {
            label: this.$t('海运'),
            id: 4,
          },
          {
            label: this.$t('铁路'),
            id: 5,
          },
        ],
      ],
      identity_type: uni.getStorageSync("identity_type"),
    };
  },
  created() {
    this.driverSelect();
    uni.$emit("getVehicleList");
    window.onNativeShow = () => {
      this.driverSelect();
    };
  },
  computed: {
    addressList() {
      return [this.provinces, this.citys, this.areas];
    },
  },
  created() {
    // 刷新页面
    console.log("99999");
    window.onNativeShow = this.driverSelect;
  },
  onShow() {
    this.driverSelect();
  },
  methods: {
    back() {
      // uni.navigateBack()
      this.cback();
    },
    addInput() {
      this.inputs.push({
        startvalue: "",
        startname: "",
        endvalue: "",
        endname: "",
        step: 0,
      });
    },
    employee() {
      uni.navigateTo({
        url: "/pages/employeeAdd/employeeAdd",
      });
    },
    removeInput(index) {
      if (this.inputs.length > 1) {
        this.inputs.splice(index, 1);
      } else {
        uni.showToast({
          title: this.$t('至少保留一个输入框'),
          icon: "none",
        });
      }
    },
    pickerCategoryChange() {
      if (this.pickerForm.transportVal == "") {
        uni.showToast({
          title: this.$t('请选择运输类型'),
          icon: "none",
        });
        return false;
      }
      this.pickerCategory = true;
    },
    selectChange(v_item, v_index) {
      this.inputs[v_index].startvalues = this.inputs[v_index].startvalue;
      this.inputs[v_index].endvalues = this.inputs[v_index].endvalue;
      this.inputs[v_index].startnames = this.inputs[v_index].startname;
      this.inputs[v_index].endnames = this.inputs[v_index].endname;
      this.inputs[v_index].startname = this.inputs[v_index].endnames;
      this.inputs[v_index].endname = this.inputs[v_index].startnames;
    },
    confirmChange(e, v_type, v_value, v_name) {
      this.pickerForm[v_value] = e.value[0].id;
      if (v_type == "pickerDriver" || v_type == "pickerCategory") {
        this.pickerForm[v_name] = e.value[0].title;
      }
      if (v_type != "pickerDriver" && v_type != "pickerCategory") {
        this.pickerForm[v_name] = e.value[0].label;
      }
      this.$data[v_type] = false;
      if (v_type == "pickerTran") {
        this.deliveryVehicle(e.value[0].id);
      }
    },
    deliveryVehicle(v_way) {
      delivery_vehicle({
        transport_way: v_way,
      }).then((res) => {
        console.log(this.$t('载具类型'), res.data.data.data);
        this.columnCategory = [[...res.data.data.data]];
        this.pickerForm.car_category_id = "";
        this.pickerForm.car_category_name = "";
      });
    },
    driverSelect() {
      driver_select({
        user_id: uni.getStorageSync("user_id"),
      }).then((res) => {
        this.columnDriver = [[...res.data.data.data]];
      });
    },
    submit_sub() {
      if (this.pickerForm.stateVal == "") {
        uni.showToast({
          title: this.$t('请选择当前状态'),
          icon: "none",
        });
        return false;
      }
      if (this.pickerForm.current_city_id == "") {
        uni.showToast({
          title: this.$t('请选择当前位置'),
          icon: "none",
        });
        return false;
      }

      if (
        this.pickerForm.transportVal == 2 &&
        this.pickerForm.driverVal == ""
      ) {
        if (this.identity_type != 8) {
          uni.showToast({
            title: this.$t('请选择司机'),
            icon: "none",
          });
          return false;
        }
      }
      if (this.pickerForm.transportVal == "") {
        uni.showToast({
          title: this.$t('请选择运输类型'),
          icon: "none",
        });
        return false;
      }
      if (this.pickerForm.car_category_id == "") {
        uni.showToast({
          title: this.$t('请选择载具类型'),
          icon: "none",
        });
        return false;
      }
      if (this.pickerForm.car_number == "") {
        let Toast = this.$t('请输入信息');
        if (this.pickerForm.transportVal == 2) Toast = "请输入车牌号-挂车号";
        if (this.pickerForm.transportVal == 3) Toast = this.$t('航班号');
        if (this.pickerForm.transportVal == 4) Toast = this.$t('箱号');
        if (this.pickerForm.transportVal == 5) Toast = this.$t('车号');
        uni.showToast({
          title: Toast,
          icon: "none",
        });
        return false;
      }
      if (
        this.pickerForm.car_l == "" &&
        this.pickerForm.car_w == "" &&
        this.pickerForm.car_h == ""
      ) {
        uni.showToast({
          title: this.$t('请输入载具尺寸信息'),
          icon: "none",
        });
        return false;
      }
      if (this.pickerForm.product_volume == "") {
        uni.showToast({
          title: this.$t('请输入载具容积'),
          icon: "none",
        });
        return false;
      }
      if (this.pickerForm.product_weight == "") {
        uni.showToast({
          title: this.$t('请输入载具载重'),
          icon: "none",
        });
        return false;
      }
      //主营线路必填
      if (this.inputs.length > 0) {
        let valid = true;
        this.inputs.forEach((item) => {
          if (!item.startvalue || !item.endvalue) {
            valid = false;
          }
        });
        if (!valid) {
          uni.showToast({
            title: this.$t('请完善主营路线'),
            icon: "none",
          });
          return false;
        }
      }
      if (this.inputs.length == 0) {
        uni.showToast({
          title: this.$t('请完善主营路线'),
          icon: "none",
        });
        return false;
      }

      let resultValue = "";
      resultValue = this.inputs.map((item) => {
        if (item.startvalue && item.endvalue) {
          return `${item.startcountry},${item.startprovince},${item.startvalue},${item.endcountry},${item.endprovince},${item.endvalue};`;
        }
      });
      if (Array.isArray(resultValue)) {
        resultValue = resultValue.join(";");
      }

      let fileLists = "";
      if (this.fileList1.length > 0) {
        fileLists = this.fileList1.map((user) => user.url).join(",");
      }

      let fileLists0 = "";
      if (this.fileList0.length > 0) {
        fileLists0 = this.fileList0.map((user) => user.url).join(",");
      }

      let pickerForms = {
        user_id: uni.getStorageSync("user_id"),
        id: this.pickerForm.id || 0,
        status: this.pickerForm.stateVal,
        driver_id: this.pickerForm.driverVal,
        mode: this.pickerForm.transportVal,
        car_number: this.pickerForm.car_number,
        trailer_number: this.pickerForm.trailer_number,
        car_l: this.pickerForm.car_l,
        car_w: this.pickerForm.car_w,
        car_h: this.pickerForm.car_h,
        product_weight: this.pickerForm.product_weight,
        product_volume: this.pickerForm.product_volume,
        car_category_id: this.pickerForm.car_category_id,
        current_city_id: this.pickerForm.current_city_id,
        logo: fileLists0,
        image: this.fileList2.map((user) => user.url).join(","),
        documents: this.fileList1.map((user) => user.url).join(","),
        transport_list: resultValue,
      };
      uni.showLoading({
        title: "提交中...",
        mask: true,
      });
      this.submit_loading = true;
      transport_save(pickerForms).then((res) => {
        if (res.data.code == 200) {
          uni.$emit("refreshIfNeeded", true);
          uni.$emit("getVehicleList"); // 调用选择车辆modal的方法，刷新列表
          setTimeout(() => {
            this.submit_loading = false;
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        } else {
          uni.showModal({
            confirmText: this.$t('关闭'),
            content: res.data.message,
            showCancel: false,
          });
          this.submit_loading = false;
        }
        uni.hideLoading();
      });
    },
    // {{$t('删除')}}{{$t('图片')}}
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增{{$t('图片')}}
    async afterRead(key, event) {
      // 当设置 multiple 为 true 时, file 为数组格式，{{$t('否')}}则为对象格式
      let lists = [].concat(event.file);

      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        this[`fileList${key}`].push({
          url: result.fullurl,
        });
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: "https://app.gluz.com.cn/api/common/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data).data);
            }, 1000);
          },
        });
      });
    },
    // {{$t('添加')}}快速填充方法
    quickFill() {
      this.pickerForm = {
        ...this.pickerForm,
        stateVal: 1,
        stateName: this.$t('空闲'),
        transportVal: 2,
        transportName: this.$t('汽运'),
        car_number: "粤B12345",
        trailer_number: "T98765",
        car_l: "12",
        car_w: "2.5",
        car_h: "4",
        product_weight: "40",
        product_volume: "120",
        car_category_id: 1,
        car_category_name: this.$t('厢式货车'),
        current_city_name: "广东省-广州市-市辖区",
      };

      // 填充{{$t('主营线路')}}
      this.inputs = [];

      // 触发{{$t('运输类型')}}变化,获取对应的{{$t('载具类型')}}{{$t('列表')}}
      this.deliveryVehicle(this.pickerForm.transportVal);

      uni.showToast({
        title: this.$t('数据已填充'),
        icon: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.required {
  color: red;
}

page {
  background-color: #f6f7fb;
}

.header {
  font-size: 34rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-top: var(--status-bar-height);
}

.back {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  top: 18rpx;
}

/deep/.u-upload__wrap__preview__image {
  width: 80px !important;
  height: 80px !important;
}

/deep/.u-upload__button {
  width: 80px !important;
  height: 80px !important;
}

/deep/.u-upload__deletable,
/deep/.u-upload__success {
  width: 40rpx !important;
  height: 40rpx !important;
}

/deep/.uicon-camera-fill {
  width: 32px !important;
  height: 32px !important;
  font-size: 32px !important;
}

/deep/.u-icon__icon {
  font-size: 32px;
}

/deep/.uicon-close {
  font-size: 32rpx !important;
  line-height: 32rpx !important;
}

/deep/.uicon-checkmark {
  font-size: 32rpx !important;
  line-height: 32rpx !important;
}

.car_line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18rpx;

  &:last-child {
    margin: 0;
  }

  .ico {
    flex-shrink: 0;
    width: 26rpx;
    margin: 0 20rpx;
  }

  .item {
    width: 100%;
    background: #f7f7f7;
    height: 80rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24rpx;
  }

  .ico_add {
    flex-shrink: 0;
    margin-left: 20rpx;
  }

  .ico_delete {
    flex-shrink: 0;
    margin-left: 20rpx;
  }
}

.footer_btn2 {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 30rpx 24rpx 60rpx;

  .btn_yellow {
    width: 340rpx;
    height: 94rpx;
    text-align: center;
    line-height: 94rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    border: 2rpx solid rgba(241, 122, 3, 0.1);
    background: linear-gradient(90deg, #ff811e 0%, #ffbe7c 100%);
    color: #fff;
    font-size: 30rpx;
    font-weight: 600;
  }

  .btn_blue {
    width: 340rpx;
    height: 94rpx;
    text-align: center;
    line-height: 94rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    border: 2rpx solid rgba(3, 189, 130, 0.1);
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    color: #fff;
    font-size: 30rpx;
    font-weight: 600;
  }
}

.bor_bgff {
  margin: 20rpx 24rpx;
  background: #fff;
  border-radius: 20rpx;
}

.item_cc {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item {
    margin-right: 30rpx;
  }

  .unit {
    color: #1d1d1d;
    font-size: 26rpx;
    line-height: 34rpx;
  }
}

.publish_time_calendars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16rpx;

  .line {
    width: 42rpx;
    height: 1rpx;
    background: #d8d8d8;
  }

  .item {
    width: 294rpx;
    height: 64rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    background: #f6f7fb;
    color: #333;
    font-size: 24rpx;
    line-height: 64rpx;
    text-align: center;
    display: flex;
    align-items: center;
  }

  .items {
    width: 100%;
    height: 64rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    background: #f6f7fb;
    color: #333;
    font-size: 24rpx;
    line-height: 64rpx;
    text-align: center;
    display: flex;
    align-items: center;
  }
}

.info_input {
  width: 100%;
  font-size: 26rpx;
  line-height: 40px;
}

.transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  border-radius: 20rpx;
  background: #f6f7fb;
  padding: 0 20rpx 0 20rpx;

  .transport_name {
    color: #333;
    font-size: 26rpx;
    line-height: 30px;
  }
}

.screen {
  padding: 0 24rpx 30rpx;

  .title {
    color: #1d1d1d;
    font-size: 28rpx;
    font-weight: 600;
    line-height: 28rpx;
    padding: 34rpx 0 24rpx;
    position: relative;

    .xuan {
      position: absolute;
      right: 0;
      top: 34rpx;
      color: #278aff;
      font-size: 26rpx;
      font-weight: normal;
    }
  }

  .info_text {
    border-radius: 18rpx;
    background: #f6f7fb;
    padding: 20rpx 24rpx;
    color: #333;
    font-size: 26rpx;
    line-height: 40rpx;
    overflow: hidden;
  }
}

.footer_none {
  width: 100%;
  height: 210rpx;
}

.footer_btn {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  background: #fff;
  padding: 30rpx 30rpx 60rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

  .btn {
    width: 100%;
    height: 90rpx;
    border-radius: 50rpx;
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    color: #fff;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: 600;
  }

  .u-button--primary {
    background-color: "";
  }
}

.quick-fill {
  padding: 0 24rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: flex-end;
}
</style>